<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname">
            <input type="text" v-model="lastname">
            <input type="text" v-model="allname">
        </div>

        

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    firstname:'',
                    lastname:'',
                    allname:'',
                },
                watch: {
                    firstname:function(newVal,oldVal){
                        this.allname=newVal+this.lastname
                    },
                    'lastname':function(one,two){
                        this.allname= this.firstname+one
                    }
                },
            })
        </script>
    </body>
</html>